<template>
  <div>
    <el-tree
      id="tree"
      :ref="ref"
      :data="tree_data"
      :props="treeprops"
      :highlight-current="highlight_current"
      @node-click="handleNodeClick"
      :node-key="node_key"
      :current-node-key="current_node_key"
      :default-expanded-keys="default_expanded_keys"
      :dufault-expand-all="default_expand_all"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
    >
      <span class="span-ellipsis" slot-scope="{ node }">
        <span :title="node.label">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      ref: this.treedatas.ref,
      tree_data: this.treedatas.tree_data,
      node_key: this.treedatas.node_key,
      current_node_key: this.treedatas.current_node_key,
      default_expanded_keys: this.treedatas.default_expanded_keys,
      highlight_current: this.treedatas.highlight_current, //高亮显示节点
      default_expand_all: this.treedatas.default_expand_all, //默认展开全部节点
      defaultShowNodes:this.treedatas.defaultShowNodes
    };
  },
  props: {
    treeprops: {
      type: Object,
      default() {
        return this.treeprops;
      },
    },
    treedatas: {
      type: Object,
      default() {
        return this.treedatas;
      },
    },
  },
  methods: {
    handleNodeClick(data) {
      // this.treechecktable = data.RUID; //每次切换时保存当前选中的节点,新增修改删除后table不变
      // this.tableData = [];
      // this.tableData = data.children;
      // // this.$refs.tree.$children[0].$children[0].$el.style.backgroundColor='rgb(255, 235, 192)';
    },
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = false;
      this.defaultShowNodes.some((item) => {
        if (item === data.RUID) {
          // 判断当前节点是否存在， 存在不做处理
          flag = true;
          return true;
        }
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.RUID);
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, i) => {
        if (item === data.RUID) {
          // 删除关闭节点
          this.defaultShowNodes.length = i;
        }
      });
      this.$nextTick(() => {
        for (
          let i = 0;
          i < this.$refs.tree.store.getNode(data.RUID).data.children.length;
          i++
        ) {
          this.$refs.tree.store.getNode(data.RUID).childNodes[
            i
          ].expanded = false;
        }
      });
    },
  },
  watch: {
    treedatas: {
      handler(newval, oldval) {
        this.treedatas = newval;
        this.tree_data = this.treedatas.tree_data;
        this.node_key = this.treedatas.node_key;
        this.current_node_key = this.treedatas.current_node_key; 
        this.default_expanded_keys = this.treedatas.default_expanded_keys; 
        this.highlight_current = this.treedatas.highlight_current;
        this.default_expand_all = this.treedatas.default_expand_all; 
        this.defaultShowNodes = this.treedatas.defaultShowNodes; 
      },
      deep: true,
    },
  },
  mounted() {
    console.log("========");
    console.log(this.treedatas);
    console.log("========");
  },
};
</script>